<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="og:title" content="オロナミンC（大塚製薬） みんながMake Me Smile!" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://apps.facebook.com/coverimage_test/" />
<meta property="og:image" content="http://119.75.230.38/facebook_terras/coverimage_test/fbapp/img/smile_logo.gif" />
<meta property="og:site_name" content="オロナミンC（大塚製薬） みんながMake Me Smile!" />
<meta property="fb:app_id" content="{FB.appId}"/>
<meta property="og:description" content="オロナミンC（大塚製薬）のFacebookアプリ、みんながMake Me Smile! 笑顔いっぱいのカバー画像をつくって、あなたのタイムラインに設定しよう！" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<title></title>
<link rel="stylesheet" href="css/common.css" />
<!--  fb -->
<script type="text/javascript">
	/*function loadList(searchType){
		$.ajax({
	        type: 'POST',
	        url: '{myself}',
	        data: 'd:list=&stype='+searchType+'&isLike={isLike}',
	        success: function(data){
	            if( '' != data ){
	                $('#videoList').html(data);
	            }
	        },
	        error: function(xhr, status, thrown){
	            alert('can not connecting to youtube...');
	        }
		});
	};
	function counter(){
		$.ajax({
	        type: 'POST',
	        url: '{myself}',
	        data: 'd:watch=&videoId',
	        success: function(data){
	            if( '' != data ){
	                $('#counter').html(data);
	            }
	        },
	        error: function(xhr, status, thrown){
	            alert('can not connecting ...');
	        }
		});
	}
*/
	function checkLike(){
		if('{isLike}'){

			//alert('you liked this page');
			}
		else{
				alert("You did not like this page");
			}
	}



	$(document).ready( function(){

		$('#actions a.uiButtonLarge').click(function(){
			alert('You click me!');
			});
	});
	function playVideo(videoId){
		$('#video_'+videoId).submit();
		//window.location.href = '?d:play&vid='+videoId;

		}
	function sort(sortValue){
		$('#searchProduct').submit();
	}
</script>
</head>
<body >
<div id="wrapper">
	<div id="content">
		<div id="likeTitle">
			<h1>いいね！を押して動画を見よう</h1>
			<p>動画を”いいね！”や”シェア”するごとに、視聴できる動画が増えていきます。友達と共有してたくさん動画を見よう！まずは、このページのいいね！をクリックしてね！</p>
		</div>
		<div id="headSearch" class="clearfix">
			<div id="searhForm">
				<form action="{myself}" method="post" name="search" target="_self" id="searchProduct">
					<input type="hidden" name="token" value="{token}" />
					<input type="hidden" name="isLike" value="{isLike}" />
					<label>表示順変更： </label> <select name="sort" class="searchSort">
						{searchOption}
					</select>
				</form>
			</div>
			<div id="counter">
			<p class="play-info">視聴済み数： <span class="viewCount">{watchedCount}</span> 個　　視聴可能数：<span class="viewRemain"> {viewRemain} </span>個</p>
			</div>

	</div><!-- End #headSearch -->
	<div id="videoList">
	<div id="paging" class="clearfix">
<!-- BEGIN pagingBlock -->{paging}<!-- END pagingBlock -->
</div>
	<!-- BEGIN videoBlock -->
		<div class="video-item clearfix" >
			<form action="{myself}?d:play&vid={videoData.id}" name="video_{videoData.id}"  method="post" id="video_{videoData.id}">
				<input type="hidden" value="{videoData.thumbnail.url}" name="videoThumb_{videoData.id}"/>
				<input type="hidden" value="{videoData.desc}" name="videoDesc_{videoData.id}"/>
				<input type="hidden" value="{videoData.title}" name="videoTitle_{videoData.id}"/>
			</form>
			<div class="video">
				<img src="{videoData.thumbnail.url}" class="video-thumb cPoiter" rel1 = "{videoData.id}" onclick="playVideo('{videoData.id}')"/>
				{videoData.playIcon}
			</div>
			<div class="video-info">
				{videoData.titleLink}
				<p class="video-desc">
					{videoData.desc}
				</p>
				<p class="video-sum">
					投稿日時： {videoData.published}　再生時間：{videoData.duration}　再生回数：{videoData.viewCount}
				</p>
				<p class="video-recomment">
					※動画を視聴するには、Facebookページを”いいね!”する必要があります。
				</p>

			</div>
		<!-- end #video-item --></div>
	<!-- END videoBlock -->

	<!-- /#videoList --></div>
	<!-- content --></div>
<!-- end #wrapper --></div>
<div id="fb-root"></div>
<script src="https://connect.facebook.net/ja_JP/all.js"></script>
<script type="text/javascript">
	window.fbAsyncInit = function() {
		FB.init({
		    appId  : '{FB.appId}',
		    oauth  : true,
		    status : true, // check login status
		    cookie : true, // enable cookies to allow the server to access the session
		    xfbml  : true  // parse XFBML
		});
		FB.Event.subscribe('edge.create', function(response) {
			alert('You just liked the page!');
		});
		FB.Canvas.setAutoGrow();
		FB.Canvas.scrollTo(0, 0);
	}
	(function(d, s, id) {
		  var js, fjs = d.getElementsByTagName(s)[0];
		  if (d.getElementById(id)) return;
		  js = d.createElement(s); js.id = id;
		  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId={FB.appId}";
		  fjs.parentNode.insertBefore(js, fjs);
		}(document, 'script', 'facebook-jssdk'));

	function growSize() {
	    var height = Number(
	      document.getElementById('myContent').style.height.split('px')[0])
	      + 100;
	    document.getElementById('myContent').style.height = height + 'px';
	}

</script>
</body>
</html>